<template>
	<view>
		<view @tap="toOpen">
			<slot/>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup_body">
				<view class="popup_body_title">
					<text style="color: #999999;" @tap="$refs.popup.close()">取消</text>
					<text style="color: #B3392B;" @tap='confirm'>确定</text>
				</view>
				<view style="padding-left:50rpx;overflow-y: auto;height:435rpx;">
					<view class="popup_body_body" v-for="(item,index) in list" :key='index' @tap="toChoose" :data-index='index'>
						<text>{{item.content}}</text>
						<view :class="{isChoose:item.choose}" ></view>
					</view>
					<view v-if="list.length<=3"></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		components: {uniPopup},
		data() {
			return {
				list:[]
			};
		},
		mounted() {
			this.toChooseStyle()
		},
		props: {
			disabled: {
				type: Boolean,
				default: false
			},
			chooselist:{
				type:Array,
				default(){
					return []
				}
			}
		},
		watch: {
			'chooselist.length':{
				handler(newValue, oldValue) { 
					if(this.chooselist.length>0&&this.list.length>0){
						for(let a=0;a<this.list.length;a++){
							for(let b=0;b<this.chooselist.length;b++){
								if(this.list[a].id==this.chooselist[b].id){
									this.list[a].choose=true
									break
								}else if(b==this.chooselist.length-1){
									this.list[a].choose=false
								}
							}
						}
					}	
				},
				immediate: true
			}
		},
		methods:{
			async toChooseStyle(){
				let res=await urls.getKind({state:2})
				this.list=res.data.reverse()
				for(let a=0;a<this.list.length;a++){
					this.list[a].choose=false
				}
				if(this.chooselist.length>0&&this.list.length>0){
					for(let a=0;a<this.list.length;a++){
						for(let b=0;b<this.chooselist.length;b++){
							if(this.list[a].id==this.chooselist[b].id){
								this.list[a].choose=true
								break
							}else if(b==this.chooselist.length-1){
								this.list[a].choose=false
							}
						}
					}
				}	
			},
			toChoose(e){
				let index=e.currentTarget.dataset.index
				this.list[index].choose=!this.list[index].choose
				this.$forceUpdate()
			},
			confirm(e){
				let list=[]
				for(let a=0;a<this.list.length;a++){
					if(this.list[a].choose){
						list.push(this.list[a])
					}
				}
				this.$emit('confirm',list)
				this.$refs.popup.close()
			},
			toOpen(){
				if(this.disabled){
					return
				}
				this.$refs.popup.open()
			}
		}
	}
</script>

<style lang="scss">
.popup_body{
	box-shadow:0px 1px 0px 0px rgba(221,221,221,1);
	background-color: #FFFFFF;
	.popup_body_title{
		height: 84rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #D8D8D8;
		text{
			padding: 30rpx;
			font-size: 34rpx;
			line-height: 34rpx;
		}
	}
	.popup_body_body{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height:107rpx ;
		border-bottom: 1rpx solid #D8D8D8;
		padding-right: 50rpx;
		text{
			font-size: 34rpx;
			color:#333333 ;
			line-height: 34rpx;
		}
		view{
			height:42rpx ;
			width: 42rpx;
			border-radius: 50%;
			border: 2rpx solid #BBBBBB;
		}
	}
}
.popup_body>view>view:last-of-type{
	border: 0;
}
.isChoose{
	background-image: url('/static/svg/isChoose.svg');
	background-position: 0 0 ;
	background-repeat: no-repeat;
	background-size: 100%;
	border: 0 !important;
}
</style>
